<template>
    <view class="content">
        <view class="nav">
        	<view class="select">
        	    <pick-regions @getRegion="handleGetRegion">
        	        <view class="adr-box">
        	            <view v-if="city">{{ city }}</view>
        	            <view v-else class="place">请选择城市</view>
        				<view>
        					<u-icon name="arrow-down" color="#919191" size="28" class="u-m-l-6"></u-icon>
        				</view>
        	        </view>
        	    </pick-regions>
        	</view>
        	<view @click="show_2 = true">
        		{{ date || '日期' }}<u-icon name="arrow-down" color="#919191" size="28" class="u-m-l-6"></u-icon>
        	</view>
        </view>
		
		<view class="tip">
			<view class="tip-r">
				<image src="../../static/icon/tj.png" class="icon"></image>
				<view>按接单量排序</view>
			</view>
		</view>
		
		<view class="box">
			<!-- 柱状图 -->
			<view class="item" v-if="chartsDataColumn1 && chartsDataColumn1.categories && chartsDataColumn1.categories.length > 0">
			    <qiun-data-charts type="column" :opts="optsBar" :chartData="chartsDataColumn1" :ontouch="true" />
			</view>
			
			<view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;"
			    v-if="chartsDataColumn1 && chartsDataColumn1.categories && chartsDataColumn1.categories.length == 0">暂无相关信息</view>
		</view>
		
		<view class="d-tip">系统每天凌晨更新数据</view>
		
		<u-picker v-model="show_2" mode="time" :params="params" @confirm="confirmTime"></u-picker>
    </view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue';
    export default {
		components: {
		    pickRegions
		},
        data() {
            return {
				params: {year: true,month: true,day: false,hour: false,minute: false,second: false},
				show_2: false,
				date: '',
				city: '选择城市',
				cityId: '',
				
                optsBar: {
                    dataLabel: true,//是否显示图表区域内数据点上方的数据文案
                    fontSize: 11,
                    duration: 0,//动画展示时长，单位毫秒
                    padding: [15, 15, 0, 5],
                    touchMoveLimit: 24, //图表拖拽时，每秒重新渲染的帧数（用于图表拖拽卡顿，可以降低js与视图层交互的次数，理论上24帧/秒就够用了）
                    enableScroll: true, //开启图表可拖拽滚动，开启后ontouch需要赋值为true，X轴配置里需要配置itemCount单屏幕数据点数量
                    xAxis: {
                        fontSize: 11,
                        // labelCount: 20,//数据点文字（刻度点）单屏幕限制显示的数量
                        disableGrid: true,//不绘制纵向网格(即默认绘制网格)
                        scrollShow: true,//是否显示滚动条，配合拖拽滚动使用（即仅在启用【基本配置】的 enableScroll 时有效）
                        itemCount: 4, //单屏数据密度即图表可视区域内显示的X轴数据点数量，仅在启用enableScroll时有效
                    },
                    yAxis: {
                        data: [{
                            min: 0,
                            max: 250 ,//X轴终止值（默认数据中的最大值）
                            fontSize: 11,
                        }]
                    },
                    extra: {
                        column: {
                            type: "group",
                            activeBgColor: "#000000",
                            activeBgOpacity: 0.08,
                            linearType: 'none', //是否渐变
                            barBorderCircle: false, //启用分组柱状图半圆边框
                            // barBorderRadius: [], //自定义4个圆角半径[左上,右上,右下,左下]（请关闭上面按钮）
                            width: 20, //条状图每个柱子的图形宽度
                            seriesGap: 2 //多series每个柱子之间的间距
                        }
                    }
                },
                
                chartsDataColumn1: {},
				// chartsDataColumn1: {
				//     "categories": ["2018","2019","2020","2021","2022","2023"],
				// 	"series": [
				// 	    {
				// 			"name": "接单量",
				// 			"data": [35,36,31,33,13,34],
				// 			color: '#0abac0',
				// 	    },
				// 	    {
				// 			"name": "实讲课量",
				// 			"data": [18,27,21,24,6,28],
				// 			color: '#ff9907',
				// 	    }
				// 	]
				// },
            };
        },
        onLoad() {
            this.getList()
        },
        methods: {
			// 获取培训统计
			getList() {
				this.$ajax('staff_train_stats', {
			        userToken: this.$getSync('userToken'),
					pdate: this.date,
					city: this.cityId,
			    }).then(ret => {
					if (ret.status == 0) {
						if (ret.data && ret.data.series && ret.data.series[0]) {
						    ret.data.series[0].color = '#0abac0'
						}
						if (ret.data && ret.data.series && ret.data.series[1]) {
							ret.data.series[1].color = '#ff9907'
						}
						
						this.chartsDataColumn1 = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			
			//选择地区
			handleGetRegion(region) {
			    console.log(region);
				this.city = region[1].name
				this.cityId = region[1].code
			    this.getList()
			},
			
			confirmTime(e) {
				console.log(e)
				this.date = e.year + '-' + e.month
				this.getList()
			},
			
        }
    };
</script>

<style lang="scss">
	
	
	
	
    page{
        background-color: #fff;
    }
	.nav{
		padding: 25rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.select {
		// flex: 1;
	    display: flex;
		justify-content: flex-end;
	    align-items: center;
	    // height: 100upx;
	}
	.adr-box {
	    // width: 76vw;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.adr-box > view {
	    // width: 100%;
	    font-size: 28upx;
		// text-align: right;
	}
	.place {
	    font-size: 28upx;
	    color: #787878;
	    // margin-right: 10upx;
	}
	
	.tip{
		padding: 40rpx 20rpx;
		display: flex;
		justify-content: flex-end;
	}
	.tip-r{
		width: 185rpx;
		height: 50rpx;
		border: 2rpx solid #00b7bd;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
		color: #00b7bd;
	}
	.icon{
		width: 23rpx;
		height: 23rpx;
		margin-right: 6rpx;
	}
	
	.box{
		padding: 40rpx 15rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #777c85;
	}
	.d-tip{
		font-size: 26rpx;
		font-weight: bold;
		text-align: center;
	}
	

</style>
